import React, { useState, useEffect } from 'react';
import {
  Card,
  Table,
  Button,
  Input,
  Tooltip,
  Tag,
  Popconfirm,
  message,
  Modal,
  InputNumber,
} from 'antd';
import styles from './index.less';
import { dcData } from '@/utils/exportData';
import api from '@/api';

const NoteList = (props: any) => {
  const [searchData, setSearchData] = useState({
    phone: '',
    id: '',
  });
  const [pagination, setPagination] = useState({
    page: 1,
    pageSize: 10,
    total: 0,
  });
  const [tabLoading, setTabLoading] = useState<boolean>(false);
  const [loading, setLoading] = useState<boolean>(false);
  const [loadBtn, setLoadBtn] = useState<boolean>(false);
  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
  const [dataSource, setDataSource] = useState([]);
  const [row, setRow] = useState<any>({
    id: '',
    revenueRate: '',
    phone: '',
  });

  const columns: any = [
    {
      title: '用户ID',
      width: 150,
      key: 'userId',
      dataIndex: 'userId',
    },
    {
      title: '昵称',
      width: 150,
      key: 'nickname',
      dataIndex: 'nickname',
    },
    {
      title: '手机号',
      width: 150,
      key: 'phone',
      dataIndex: 'phone',
    },
    {
      title: '积分奖励余额',
      width: 150,
      key: 'integralBalance',
      dataIndex: 'integralBalance',
    },
    {
      title: '奖励系数',
      width: 150,
      key: 'rewardFactor',
      dataIndex: 'rewardFactor',
    },
    {
      title: '银行卡信息',
      width: 150,
      key: '',
      render: (row: any) => {
        return (
          <div>
            <p>{row.bankName}</p>
            <p>{row.bankLegal}</p>
            <p>{row.bankAccount}</p>
          </div>
        );
      },
    },
    {
      title: '邀请码',
      width: 150,
      key: 'inviteCode',
      dataIndex: 'inviteCode',
    },
    {
      title: '邀请者邀请码',
      width: 150,
      key: 'inviterCode',
      dataIndex: 'inviterCode',
    },
    {
      title: '团队关系',
      width: 150,
      key: '',
      render: (row: any) => {
        return (
          <Tooltip title={row.teamRelationship} color="blue">
            <Tag color="volcano" style={{ cursor: 'pointer' }}>
              查看关系
            </Tag>
          </Tooltip>
        );
      },
    },
    {
      title: '操作',
      width: 150,
      key: '',
      fixed: 'right',
      render: (row: any) => {
        return (
          <>
            <Tag
              color="#f50"
              style={{ cursor: 'pointer' }}
              onClick={() => {
                setRow(row);
                setIsModalVisible(true);
              }}
            >
              修改奖励系数
            </Tag>
            <Popconfirm
              title="确定清空积分吗?"
              onConfirm={() => confirm(row.id)}
              okText="确定"
              cancelText="取消"
            >
              <Tag color="#2db7f5" style={{ cursor: 'pointer' }}>
                清空积分
              </Tag>
            </Popconfirm>
          </>
        );
      },
    },
  ];

  useEffect(() => {
    fetchData({
      ...searchData,
      page: 1,
      pageSize: 10,
    });
  }, []);
  // 搜索数据
  const changeFormData = (type: string, value: any) => {
    const newSearchData: any = { ...searchData };
    newSearchData[type] = value;
    setSearchData(newSearchData);
  };
  // 切换页面
  const onChangePage = (value: any) => {
    const newPagination = { ...pagination };
    newPagination['page'] = value.current;
    newPagination['pageSize'] = value.pageSize;
    setPagination(
      Object.assign(pagination, {
        ...newPagination,
      }),
    );
    fetchData({
      ...searchData,
      page: value.current,
      pageSize: value.pageSize,
    });
  };
  // 获取列表接口
  const fetchData = (params: any) => {
    if (tabLoading) return;
    setTabLoading(true);
    api.note
      .server_notes_integral_page({
        userId: params.id,
        phone: params.phone,
        pageNum: params.page,
        pageSize: params.pageSize,
      })
      .then(res => {
        const { integralUserList, total } = res;
        setDataSource(integralUserList);
        setPagination(
          Object.assign(pagination, {
            total,
          }),
        );
      })
      .finally(() => {
        setTabLoading(false);
      });
  };
  // 清空积分
  const confirm = (id: any) => {
    api.note
      .server_notes_clear_points({
        userId: id,
      })
      .then(() => {
        message.success('操作成功');
        fetchData({
          ...searchData,
          page: 1,
          pageSize: 10,
        });
      });
  };
  // 修改奖励系数
  const sure = () => {
    if (loading) return;
    setLoading(true);
    api.note
      .server_notes_reward_factor_update({
        userId: row.userId,
        rewardFactor: row.rewardFactor,
      })
      .then(() => {
        message.success('修改成功');
        fetchData({
          ...searchData,
          page: 1,
          pageSize: 10,
        });
      })
      .finally(() => {
        setLoading(false);
        setIsModalVisible(false);
      });
  };
  // 导出
  const exportData = () => {
    if (loadBtn) return;
    setLoadBtn(true);
    api.note
      .server_notes_integral_list({
        pageNum: pagination.page,
        pageSize: pagination.pageSize,
        ...searchData,
      })
      .then(res => {
        const { integralUserList } = res;
        const len = columns.length;
        dcData(integralUserList, columns.splice(0, len - 1), '待划拨积分');
      })
      .finally(() => {
        setLoadBtn(false);
      });
  };
  return (
    <div>
      <div className={styles.title}>{props.route.title}</div>
      <Card bordered={false}>
        <div className={styles.heade}>
          <div className={styles.searchHead}>
            <Input
              className={styles.formItem}
              value={searchData.phone}
              onChange={(e: any) => changeFormData('phone', e.target.value)}
              placeholder="请输入手机号"
            ></Input>
            <Input
              className={styles.formItem}
              onChange={(e: any) => changeFormData('id', e.target.value)}
              value={searchData.id}
              placeholder="请输入用户ID"
            ></Input>
            <Button
              className={styles.searchBtn}
              type="primary"
              onClick={() => {
                fetchData({
                  ...searchData,
                  page: 1,
                  pageSize: 10,
                });
              }}
            >
              搜索
            </Button>
          </div>
          <Button
            type="primary"
            className={styles.addBtn}
            loading={loadBtn}
            onClick={exportData}
          >
            导出
          </Button>
        </div>
        <Table
          rowKey="userId"
          loading={tabLoading}
          dataSource={dataSource}
          columns={columns}
          scroll={{ x: 1300 }}
          pagination={{
            current: pagination.page,
            pageSize: pagination.pageSize,
            pageSizeOptions: ['10', '20', '40'],
            total: pagination.total,
            showSizeChanger: true,
          }}
          onChange={onChangePage}
        />
      </Card>
      <Modal
        title="修改奖励系数"
        visible={isModalVisible}
        destroyOnClose={true}
        onOk={() => {
          sure();
        }}
        width={450}
        confirmLoading={loading}
        onCancel={() => {
          setIsModalVisible(false);
          setRow({});
        }}
      >
        <div className={styles.rowItem}>
          <div className={styles.rowLabel}>用户Id：</div>
          <Input
            className={styles.formItem}
            value={row.userId}
            disabled
          ></Input>
        </div>
        <div className={styles.rowItem}>
          <div className={styles.rowLabel}>奖励系数</div>
          <InputNumber
            className={styles.formItem}
            value={row.rewardFactor}
            min={0}
            onChange={(value: any) => {
              setRow({
                ...row,
                rewardFactor: value,
              });
            }}
            placeholder="请输入"
          ></InputNumber>
        </div>
      </Modal>
    </div>
  );
};

export default NoteList;
